<template>
  <div class="window" v-rollBottom="rollBottom" data-bottom="50">
    <div>
      自定义指令 "v-rollBottom"，到底部执行回调函数，"data-bottom"参数为距离底部多少距离执行回调函数
    </div>
    <div v-for="(item,index) in list" :key="index"><br>{{item}}<br></div>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
let list = reactive([])
let index = ref(0);
for(;index.value <= 100;index.value++){
  list.push(index.value)
}
const rollBottom = (e) => {
  console.log(e,"滚动到底部")
  for(var i = index.value;i <= index.value + 20;i++){
    list.push(i)
  }
  index.value = i;
}
</script>

<style lang="scss" scoped>
.window{
  width: 500px;
  height: 500px;
  overflow: auto;
  background-color: #ddd;
  padding: 20px;
}
</style>